<link rel="stylesheet" href="../../node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="../index.css">
<style>
.txtFont{font-family: Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New, monospace; font-size:16px;}
.ta{background-color: white; padding: 0 2px; outline: none; border: 0; margin: 0; height: 100%;}
</style>
<div class="container-fluid d-flex flex-column w-100" style="overflow:hidden; height:100vh; padding-top:12px;" id="app">
    <div class="row" style="flex:1; height:100vh; overflow:hidden;">
        <div class="col p-0">
            <textarea class="form-control form-control-sm txtFont ta" style="resize:none" id="txtJson" v-model="strJson"></textarea>
            <!-- <div class="ta" id="txtJson" contenteditable="true">{{strJson}}</div> -->
        </div>
    </div>
    <div class="row mt-2 fixed-bottom position-sticky" style="height:62px;">
        <div class="col text-end">
            <button type="button" class="btn btn-primary btn-sm" @click="format">格式化JSON</button>&nbsp;&nbsp;&nbsp;
            <button type="button" class="btn btn-primary btn-sm" @click="minify">压缩JSON</button>&nbsp;&nbsp;&nbsp;
            <button type="button" class="btn btn-primary btn-sm" @click="copy('')">复制结果</button>&nbsp;&nbsp;&nbsp;
            <button type="button" class="btn btn-primary btn-sm" @click="copy('xml')">复制为xml</button>&nbsp;&nbsp;&nbsp;
            <button type="button" class="btn btn-primary btn-sm" @click="copy('yaml')">复制为yaml</button>
        </div>
    </div>
</div>
<script src="../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="../../node_modules/x2js/x2js.js"></script>
<script src="../lib/json.yaml.js"></script>
<script src="../lib/json.minify.js"></script>
<script src="../../node_modules/vue/dist/vue.global.prod.js"></script>
<script>
const app = {
    data() {
        return {
            strJson: '',
            operation: ''
        }
    },
    created() {
        document.addEventListener('keyup', (e) => {
            if (e.ctrlKey && e.shiftKey && (e.key == 'I' || e.key ==  'i')) {
                parent.devTools();
            }
            if (e.ctrlKey && (e.key == 'r' || e.key == 'R')) {
                parent.refresh();
            }
        });
    },
    mounted() {
        let divJson = document.querySelector('#txtJson');
        divJson.focus();
        // divJson.addEventListener('paste', (e) => {
        //     e.preventDefault();
        //     // console.info(this.strJson);
        //     if(document.getSelection().toString().trim() == divJson.textContent.trim()) {
        //         console.info('all selected before ctrl+v');
        //         divJson.innerHTML = '';
        //         navigator.clipboard.readText().then(text => {
        //             divJson.textContent = text;
        //         });
        //     } else {
        //         let selection=window.getSelection()
        //         let range=selection.getRangeAt(0)
        //         let node = document.createElement("span");
        //         navigator.clipboard.readText().then(text => {
        //             node.innerText = text;
        //             range.insertNode(node);
        //         });
        //     }
        // });
    },
    methods: {
        format() {
            this.operation = 'format'
            // let strJson = document.querySelector('#txtJson').innerText
            let tmp = eval("(" + this.strJson + ")");
            // document.querySelector('#txtJson').innerHTML = '<pre>' + JSON.stringify(tmp, null, 4) + '</pre>';
            this.strJson = JSON.stringify(tmp, null, 4)
        },
        minify() {
            this.operation = 'minify'
            this.strJson = JSON.minify(this.strJson)
        },
        copy(name) {
            if('' == name || undefined == name) {
                let title = this.operation == 'format' ? '格式化' : '压缩'
                navigator.clipboard.writeText(this.strJson)
                parent.notification({title: 'note', body: title + '结果内容已经复制到剪贴板'})
                return;
            }
            let jsonObj = eval("(" + this.strJson + ")"), re
            const handlers = {
                'xml': function(jsonObj) {
                    let x2js = new X2JS();
                    re = x2js.js2xml(jsonObj)
                },
                'yaml': function() {
                    let yaml = new YAML();
                    re = yaml.j2y(jsonObj)
                }
            }
            handlers[name](jsonObj)
            navigator.clipboard.writeText(re)
            parent.notification({title: 'note', body: `${name}格式内容已经复制到剪贴板`})
        }
    }
}
Vue.createApp(app).mount('#app');
</script>